<!--
 * @Copyright: Copyright (c) 2021 andyten
 * @Description:  自定义指令
 * @Author: andy.ten@tom.com
 * @Date: 2021-08-29 16:50:31
 * @LastEditors: andy.ten@tom.com
 * @LastEditTime: 2021-11-03 15:48:19
 * @Version: 1.0.1
-->
<template>
  <div>
    <p class="header-title" :style="{ fontSize: 18 + 'px', fontWeight: 'bold' }">自定义指令：</p>
    <div id="baseexample">
      <p>Scroll down the page</p>
      <p v-pins:[direction]="200" :style="{ color: 'red' }">Stick me 200px from the top of the page</p>
    </div>
    <p class="header-title" :style="{ fontSize: 18 + 'px', fontWeight: 'bold' }">全局Vuex状态验证（响应式变化）：</p>
    <div><button @click="increment">+</button></div>
  </div>
</template>
<script>
export default {
  // 自定义局部指令
  directives: {
    pin: {
      bind: function(el, binding, vnode) {
        el.style.position = 'fixed';
        var s = JSON.stringify;
        el.innerHTML = 'name: ' + s(binding.name) + '<br>' + 'value: ' + s(binding.value) + '<br>' + 'expression: ' + s(binding.expression) + '<br>' + 'argument: ' + s(binding.arg) + '<br>' + 'modifiers: ' + s(binding.modifiers) + '<br>' + 'vnode keys: ' + Object.keys(vnode).join(', ');
        var s1 = binding.arg == 'left' ? 'left' : 'top';
        el.style[s1] = binding.value + 'px';
        el.style.top = binding.value + 'px';
      },
    },
  },
  data: function() {
    return {
      direction: 'left',
    };
  },
  methods: {
    increment() {
      this.$store.commit('increment');
      console.log(this.$store.state.g_count);
    },
  },
};
</script>
